<template>
    <div class="container">
        <div class="mainbox">
            <div class="box">
                <div class="row" :class="select == index ? 'active' : ''" v-for="(item,index) in list" :key="index">
                    <small>优惠券</small>
                    <br>
                    {{item.name}}</div>
                <div class="draw" @click="startDraw()">抽奖</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'lottery',
    data(){
        return{
            list:[
                {
                    name:'50-10',
                },
                {
                    name:'50-5',
                },
                {
                    name:'15-3',
                },
                {
                    name:'20-2',
                },
                {
                    name:'35-4',
                },
                {
                    name:'100-10',
                },
                {
                    name:'600-30',
                },
                {
                    name:'123-12',
                },
            ],
            flag: true,//是否开始抽奖
            select: 0,//页面对应抽奖下标
            timer: "",
            count: 0
        }
    },
     methods: {
        startDraw() {
            // if(this.$store.state.user==null){
            //     alert("请先登录,再白嫖优惠券");
            //     console.log('demo1---- :>> ', demo1);
            //     return false;
            // }
            if(this.$store.state.user.id<0){
                console.log('demo2 :>> ', demo2);
                alert("请先登录,再白嫖优惠券");
                return
            }
            if (this.flag == true) {
                this.flag = false
                this.timer = setInterval(() => {
                    this.spinPrize()
                }, 100)
            }
        },

        spinPrize() {
            var spin = 3 //旋转圈数
            // var win = 5 //中奖产品 0-7
            var win = Math.floor(Math.random()*7) //中奖产品 0-7
            this.select += 1
            if (this.select > 7 && this.count != spin) {
                this.select = 0
                this.count += 1
            }
            if (this.select == win && this.count == spin) {
                clearInterval(this.timer)
                this.flag = true
                this.count = 0
                this.$store.state.discount.push(this.list[this.select].name);
                console.log('this.$store.state.discount :>> ', this.$store.state.discount);
                // console.log("中奖产品为:" + this.list[this.select].name)
                alert("恭喜获得优惠券:"+"\n" + this.list[this.select].name)
            }
        },
    }
    
}
</script>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .mainbox{
        padding-top: 400px;
        padding-bottom: 100px;
        width: 600px;
        height: 820px;
        margin-top: -100px;
        /* margin: auto; */
        margin-left: 25%;
        margin-right: 25%;
        background-image: url(../assets/image/ck.png);
    }
    .box {
        position: relative;
        width: 400px;
        height: 400px;
        /* background-color: aqua; */
        /* opacity:0.75; */
        margin: auto;
    }
    .draw {
        position: absolute;
        top: 50%;
        left: 49.2%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background: chocolate;
        text-align: center;
        line-height: 100px;
        color: #fff;
        cursor: pointer;
        border-radius:8px;
    }
    .row {
        position: absolute;
        width: 100px;
        height: 100px;
        line-height: 42px;
        background: cadetblue;
        color: #fff;
        text-align: center;
        opacity:0.75;
        border-radius:8px;
    }
    .box .row:nth-child(1) {
        top: 0;
        left: 0;
    }
    .box .row:nth-child(2) {
        top: 0;
        left: 53.5%;
        transform: translate(-53.5%, 0);
    }
    .box .row:nth-child(3) {
        top: 0;
        right: 0;
    }
    .box .row:nth-child(4) {
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
    }
    .box .row:nth-child(5) {
        bottom: 0;
        right: 0;
    }
    .box .row:nth-child(6) {
        bottom: 0;
        right: 56.5%;
        transform: translate(56.5%, 0);
    }
    .box .row:nth-child(7) {
        bottom: 0;
        left: 0;
    }
    .box .row:nth-child(8) {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
    }
    .active {
        background: lightseagreen !important;
    }
</style>